<!-- 资产交易 -->
<template>
  <div class="props-trade-page">
    <el-row type="flex" justify="center">
      <el-col class="middle-content">
        <el-row class="props-trade-content">
          <!-- 展示图标 -->
          <el-row type="flex" justify="space-around" class="top-icon">
            <div class="item">
              <img src="../../assets/img/propsTrade_top_1.png" alt />
              <span>交易资产丰富</span>
            </div>
            <div class="item">
              <img src="../../assets/img/propsTrade_top_2.png" alt />
              <span>电子竞价交易</span>
            </div>
            <div class="item">
              <img src="../../assets/img/propsTrade_top_3.png" alt />
              <span>信息公开透明</span>
            </div>
            <div class="item">
              <img src="../../assets/img/propsTrade_top_4.png" alt />
              <span>市场发现价值</span>
            </div>
          </el-row>
          <!-- 筛选 -->
          <filter-mod @setfilter="setfilter" />
          <!-- 表单 -->
          <el-row>
            <!-- 表单筛选 -->
            <el-row type="flex" justify="space-between" align="middle" class="fromFilter">
              <div class="left">
                <el-button type="info" plain size="mini" @click="defaultSort">默认顺序</el-button>
                <el-dropdown type="primary" style="margin:0 16px" @command="AmountOrderSort">
                  <el-button type="primary" plain size="mini">
                    挂牌价格
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">价格升序</el-dropdown-item>
                    <el-dropdown-item command="0">价格降序</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown type="primary" @command="timeOrderSort">
                  <el-button type="primary" plain size="mini">
                    挂牌截止时间
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">时间升序</el-dropdown-item>
                    <el-dropdown-item command="0">时间降序</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="right">
                <el-input placeholder="请输入内容" v-model="searchData" class="search-input">
                  <el-button slot="append" icon="el-icon-search" @click="searchChange"></el-button>
                </el-input>
              </div>
            </el-row>
            <!-- 表单 -->
            <from-trade :listData="listData" v-if="listData && listData.length>0"></from-trade>
            <el-row type="flex" justify="center" class="no-data" v-else>暂无数据</el-row>
            <!-- 分页 -->
            <el-row type="flex" justify="center">
              <el-pagination
                :hide-on-single-page="true"
                @current-change="handleCurrentChange"
                :current-page.sync="page.current"
                :page-size="page.size"
                layout="prev, pager, next, jumper"
                :total="page.total"
              ></el-pagination>
            </el-row>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import {getPropsList} from '../../api/propsTrade'
import {getProvince, getCity} from '../../plugins/area-data/areaData'

import FilterMod from './filterMod'
import FromTrade from './fromTrade'

export default {
  name: 'PropsTrade',
  components: {
    FilterMod,
    FromTrade
  },
  props: {},
  data() {
    return {
      page: {
        current: 0,
        size: 0,
        total: 0
      },
      searchData: '',
      listData: null, // 列表
      filterFrom: {},
      formData: {},
      //=======================
      AmountOrderVal: 0, // 金额倒
      timeOrderVal: 0, // 金额倒
      defaultSortVal: true // 默认排序
    }
  },
  methods: {
    // 搜索
    searchChange() {
      const _this = this
      getPropsList(Object.assign({}, _this.formData, {searchSomething: _this.searchData})).then(res => {
        _this.listData = null
        _this.listData = res.data.result.records
        _this.page = {
          current: res.data.result.current,
          size: res.data.result.size,
          total: res.data.result.total
        }
      })
    },
    // 分页
    handleCurrentChange() {
      const _this = this
      getPropsList(Object.assign({}, _this.formData, {pageSize: _this.page.current})).then(res => {
        _this.listData = null
        _this.listData = res.data.result.records
        _this.page = {
          current: res.data.result.current,
          size: res.data.result.size,
          total: res.data.result.total
        }
      })
    },
    // 排序
    AmountOrderSort(val) {
      // 金额排序
      const _this = this
      _this.AmountOrderVal = val
      _this.formData = Object.assign({}, _this.filterFrom, {AmountOrder: val})
      getPropsList({..._this.formData}).then(res => {
        _this.listData = null
        _this.listData = res.data.result.records
        _this.page = {
          current: res.data.result.current,
          size: res.data.result.size,
          total: res.data.result.total
        }
      })
    },
    timeOrderSort(val) {
      // 时间排序
      const _this = this
      _this.timeOrderVal = val
      _this.formData = Object.assign({}, _this.filterFrom, {timeOrder: val})
      getPropsList({..._this.formData}).then(res => {
        _this.listData = null
        _this.listData = res.data.result.records
        _this.page = {
          current: res.data.result.current,
          size: res.data.result.size,
          total: res.data.result.total
        }
      })
    },
    defaultSort() {
      // 默认排序
      this.defaultSortVal = !this.defaultSortVal
      if (this.defaultSortVal) {
        getPropsList(this.filterFrom).then(res => {
          _this.listData = null
          this.listData = res.data.result.records
          this.page = {
            current: res.data.result.current,
            size: res.data.result.size,
            total: res.data.result.total
          }
        })
      }
    },
    // 筛选条件
    setfilter(from) {
      this.filterFrom = from
      getPropsList(from).then(res => {
        this.listData = null
        this.listData = res.data.result.records
        this.page = {
          current: res.data.result.current,
          size: res.data.result.size,
          total: res.data.result.total
        }
      })
    },
    herfto(name) {
      this.$router.push(`/${name}`)
    }
  },
  created() {
    this.setfilter()
  },
  mounted() {}
}
</script>


<style lang='less' scoped>
.no-data {
  font-size: 16px;
  text-align: center;
  line-height: 32px;
}
.middle-content {
  margin-bottom: 20px;
}
.fromFilter {
  margin: 20px 0;
}

.top-icon {
  margin-top: 30px;
  margin-bottom: 24px;
  span {
    font-size: 16px;
    color: #333333;
    line-height: 28px;
  }
  img {
    width: 28px;
    height: 28px;
    margin-right: 18px;
  }
}

.el-pagination {
  margin-top: 20px;
}
.props-trade-content {
  margin-top: 376px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px;
}
.props-trade-page {
  background-image: url('../../assets/img/props_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
}
</style>